<template>
  <div class="content" v-if="orderDetails">
    <div class="addr">
      <div class="tit">
        收货地址：{{ orderDetails.contact
        }}<span>{{ orderDetails.phone }}</span>
      </div>
      <div class="addr-txt">
        地址：{{
          orderDetails.province +
          orderDetails.city +
          orderDetails.area +
          orderDetails.detail
        }}
      </div>
    </div>
    <div class="page-tit">请选择要退款的商品</div>
    <div class="goods">
      <div class="goods-title">
        <div class="select">
          <el-checkbox
            @change="allSelectGoods"
            :value="allSelect"
            :indeterminate="halfSelect"
          >
            全选
          </el-checkbox>
        </div>
        <div class="info">商品信息</div>
        <div class="spec">规格</div>
        <div class="price">单价</div>
        <div class="number">数量</div>
        <div class="price1">优惠金额</div>
        <div class="money">金额</div>
      </div>
      <div class="goods-list">
        <div
          class="item"
          v-for="(goods, i) in orderDetails.orderdetail"
          :key="i"
        >
          <div class="select">
            <el-checkbox
              v-model="goods.select"
              :value="allSelect"
            ></el-checkbox>
          </div>
          <img :src="goods.banner" alt="" />
          <div class="tit">{{ goods.good_name }}</div>
          <!-- <div class="spec" v-html="goods.name_attr.join('<br/>')"></div> -->
          <div class="spec" v-html="goods.name"></div>
          <div class="price">
            <b>￥{{ goods.estimate_price }}</b>
            <!-- <s>￥{{ goods.del_price }}</s> -->
          </div>
          <div class="num">
            <NumberInput1 v-model="goods.goods_quantity" :disable="true" />
          </div>
          <div class="price1">
            <b>￥{{ goods.coupon_price }}</b>
          </div>
          <div class="money">￥{{ goods.total_price }}</div>
        </div>
      </div>
    </div>

    <div class="page-tit">请选择服务类型</div>
    <div class="cont service-type">
      <div
        class="return-type"
        @click="returnForm.type = 0"
        :class="{ active: returnForm.type == 0 }"
      >
        <icon name="icontui" size="40" />
        <div class="text">
          <b>仅退款（无需退货）</b><span>未收到货，无需退还货物</span>
        </div>
      </div>
      <div
        class="return-type"
        @click="returnForm.type = 1"
        :class="{ active: returnForm.type == 1 }"
      >
        <icon name="icontui" size="40" />
        <div class="text">
          <b>退款退货</b><span>已收到货，需要退还收到的货物</span>
        </div>
      </div>
    </div>
    <div class="cont">
      <div class="return-form">
        <el-form
          ref="form"
          :rules="returnRules"
          :model="returnForm"
          label-width="100px"
          size="medium"
        >
          <el-form-item label="退款原因：" :prop="returnForm.reason">
            <el-select v-model="returnForm.reason">
              <el-option
                :value="item.title"
                :label="item.title"
                v-for="(item, index) in return_reason"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付金额："
            ><span class="red"
              >¥ {{ orderDetails.need_payment }}</span
            ></el-form-item
          >
          <!-- <el-form-item label="包含优惠券："
            ><span class="red">¥ {{ returnForm.youhui }}</span></el-form-item
          > -->
          <!-- <el-form-item label="退款金额：">
            <el-input
              type="number"
              class="red"
              v-model.number="returnForm.returnMoney"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="退款说明：">
            <el-input
              type="textarea"
              v-model="returnForm.remark"
              :rows="6"
              placeholder="请输入…"
              show-word-limit
              :maxlength="200"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传图片：">
            <div class="image-list">
              <div
                class="img"
                v-for="(item, index) in returnForm.voucher"
                :key="index"
              >
                <FileImage
                  @click.native.stop="returnForm.voucher.splice(index, 1)"
                  :file="item"
                />
              </div>
              <div
                @click="uploadImage"
                class="add"
                v-if="returnForm.voucher.length < 9"
              >
                <icon name="iconshangchuanzhaopian" size="28" />
                <span>上传照片<br />最多上传9张</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="enter" class="button"
              >提交申请</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api";
import NumberInput1 from "@/components/NumberInput/NumberInput1.vue";
import FileImage from "@/components/ImageView/FileImage.vue";

export default {
  name: "OrderCreate",
  components: { NumberInput1, FileImage },
  data() {
    return {
      orderDetails: null,
      return_reason: [],
      returnForm: {
        type: 0,
        reason: "",
        remark: "",
        voucher: [],
      },
      returnRules: {
        yuany: [{ required: true, message: "请选择退款原因", trigger: "blur" }],
        returnMoney: [
          { required: true, message: "请输入退款金额", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    allSelect() {
      if (!this.orderDetails) return false;
      let select = true;
      this.orderDetails.orderdetail.some((item) => {
        if (!item.select) {
          select = false;
          return true;
        }
      });
      return select;
    },
    halfSelect() {
      if (!this.orderDetails) return false;
      if (this.allSelect) return false;
      let select = false;
      this.orderDetails.orderdetail.some((item) => {
        if (item.select) {
          select = true;
          return true;
        }
      });
      return select;
    },
  },
  async created() {
    this.orderDetails = await api.ORDER_DATAILS(this.$route.params.id);
    console.log(this.orderDetails);
    let tkyy = await api.ORDER_TKYY();
    this.return_reason = tkyy.return_reason;
    this.allSelectGoods();
  },
  methods: {
    uploadImage() {
      let input = document.createElement("input");
      input.type = "file";
      input.onchange = async () => {
        // this.returnForm.voucher.push(input.files[0]);
        let url = await api.UPLOAD(input.files[0]);
        this.returnForm.voucher.push(url.img_path);
      };
      input.click();
    },
    async enter() {
      // order_number	是	string	订单号
      // type	是	int	退换类型：0为退款（无需退货），1为退货退款
      // reason	是	string	退换原因
      // remark	否	string	备注
      // phone	是	string	联系电话
      // voucher	否	array	凭证
      if (this.returnForm.reason == "")
        return this.$message.error("请选择退换货原因");

      if (this.returnForm.remark == "")
        return this.$message.error("请填写退款说明");
      this.returnForm.order_number = this.orderDetails.order_number;
      this.returnForm.phone = this.orderDetails.phone;
      this.returnForm.good = [];

      if (this.halfSelect || this.allSelect) {
        this.orderDetails.orderdetail.forEach((item) => {
          if (item.select) this.returnForm.good.push(item);
        });
      } else {
        this.returnForm.good = this.orderDetails.orderdetail;
      }

      api.ORDER_ADD_RETURN(this.returnForm).then((res) => {
        console.log(res);
        this.$router.push({ path: "/user/saleafter/0" });
      });
    },
    allSelectGoods() {
      if (this.allSelect) {
        this.orderDetails.orderdetail.forEach((item, index) => {
          this.$set(this.orderDetails.orderdetail[index], "select", false);
        });
      } else {
        this.orderDetails.orderdetail.forEach((item, index) => {
          this.$set(this.orderDetails.orderdetail[index], "select", true);
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #fff;
  padding: 1px 1px 40px;
  .addr {
    max-width: 1200px;
    margin: 0 auto 40px;
    height: 92px;
    background: #fffafa;
    border: 1px solid #ffd6d6;
    .tit {
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      line-height: 20px;
      padding: 20px 16px 12px;
    }
    .addr-txt {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      padding: 0 16px;
    }
  }
  .page-tit {
    max-width: 1200px;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    line-height: 22px;
  }
  .goods {
    max-width: 1200px;
    margin: 20px auto 40px;
    .goods-title {
      height: 42px;
      display: flex;
      align-items: center;
      background: #f3f5f9;
      border: 1px solid #f0f0f0;
      padding: 0 16px;
      font-size: 16px;
      color: #333333;
      .select {
        margin-right: 58px;
        ::v-deep .el-checkbox {
          .el-checkbox__label {
            font-size: 16px !important;
            position: relative;
            top: 0px;
            padding-left: 16px;
          }
        }
      }
      .info {
        width: 64px;
        margin-right: 216px;
      }
      .spec {
        width: 32px;
        margin-right: 128px;
      }
      .price {
        width: 32px;
        margin-right: 109px;
      }
      .number {
        width: 32px;
        margin-right: 145px;
      }
      .price1 {
        width: 64px;
        margin-right: 168px;
      }
    }
    .goods-list {
      background: #f9f9f9;
      border: 1px solid #dedede;
      .item {
        display: flex;
        padding: 16px 40px 20px 16px;
        .select {
          margin-right: 16px;
          margin-top: 26px;
        }
        img {
          width: 78px;
          height: 78px;
          border-radius: 5px;
          margin-right: 12px;
        }
        .tit {
          width: 240px;
          margin-right: 41px;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
        }
        .spec {
          width: 120px;
          margin-right: 40px;
          font-size: 14px;
          color: #666666;
          line-height: 20px;
        }
        .price {
          width: 80px;
          margin-right: 60px;
          display: flex;
          flex-direction: column;
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          line-height: 20px;
          s {
            color: #999999;
          }
        }
        .num {
          margin-right: 63px;
        }
        .price1 {
          font-size: 14px;
          font-weight: 600;
          color: #333333;
          line-height: 20px;
        }
        .money {
          flex: 1;
          width: 0;
          text-align: right;
          font-size: 16px;
          font-weight: 600;
          color: #d52c1a;
          line-height: 22px;
        }
      }
    }
  }
  .cont {
    max-width: 1200px;
    margin: 20px auto;
  }
  .service-type {
    display: flex;
    justify-content: space-between;
    .return-type {
      // width: 570px;
    }
  }
  .return-type {
    width: 580px;
    height: 135px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #999999;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 24px;
    color: #999999;
    line-height: 33px;
    cursor: pointer;
    &.active {
      color: #d52c1a;
      border: 1px solid #d52c1a;
    }
    .text {
      display: flex;
      margin-left: 20px;
      flex-direction: column;
      span {
        font-size: 16px;
        color: #999999;
        line-height: 22px;
        margin-top: 20px;
      }
    }
  }
  .return-form {
    width: 583px;
    margin: 20px 0;
    .image-list {
      display: flex;
      flex-wrap: wrap;
      & > div:nth-child(3n + 1) {
        margin-left: 0;
      }
      .img {
        margin-bottom: 20px;
        width: 120px;
        margin-left: 20px;
        height: 120px;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #dedede;
        overflow: hidden;
      }
      .add {
        margin-left: 20px;
        width: 120px;
        height: 120px;
        border-radius: 5px;
        box-sizing: border-box;
        border: 1px solid #dedede;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
        cursor: pointer;
        i {
          margin-bottom: 13px;
        }
        span {
          text-align: center;
        }
      }
    }
    .red {
      font-size: 14px;
      font-weight: 600;
      color: #d52c1a;
      line-height: 20px;
      ::v-deep input {
        font-size: 14px;
        font-weight: 600;
        color: #d52c1a;
        line-height: 20px;
      }
    }
    .button {
      margin-top: 20px;
      width: 220px;
      height: 44px;
      border-radius: 5px;
      font-size: 16px;
      color: #ffffff;
    }
  }
}
</style>
